import type { VbenFormSchema } from '@vben/common-ui';
import type { VxeGridProps } from '@vben/plugins/vxe-table';

import { h } from 'vue';

import { Switch } from 'ant-design-vue';

import { CellOperation, CellTag } from '#/adapter/vxe-table';

export function useColumns(
  onActionClick: (params: any) => void,
  onStatusChange?: (newStatus: boolean, row: any) => Promise<boolean>,
): VxeGridProps['columns'] {
  return [
    {
      type: 'checkbox',
      width: 50,
    },
    {
      field: 'customerCode',
      title: '客户编号',
      width: 120,
    },
    {
      field: 'customerName',
      title: '客户名称',
      width: 200,
    },
    {
      field: 'organizationName',
      title: '客户名称',
      width: 200,
    },
    {
      field: 'status',
      title: '状态',
      width: 100,
      cellRender: ({ row }) => {
        if (!onStatusChange) {
          return h(CellTag, {
            value: row.status === 1 ? '正常服务' : '暂停服务',
            color: row.status === 1 ? 'green' : 'red',
          });
        }
        return h(Switch, {
          checked: row.status === 1,
          checkedChildren: '正常',
          unCheckedChildren: '暂停',
          onChange: async (checked: boolean) => {
            const success = await onStatusChange(checked, row);
            if (success) {
              row.status = checked ? 1 : 0;
            }
          },
        });
      },
    },
    {
      field: 'accountant',
      title: '记账会计',
      width: 120,
    },
    {
      field: 'supervisor',
      title: '主管会计',
      width: 120,
    },
    {
      field: 'bookkeeper',
      title: '制单会计',
      width: 120,
    },
    {
      field: 'actions',
      title: '操作',
      width: 200,
      fixed: 'right',
      cellRender: ({ row }) => {
        return h(CellOperation, {
          onActionClick,
          outside: false,
          row,
          actions: [
            {
              code: 'edit',
              text: '编辑',
              tooltip: '编辑客户信息',
            },
            {
              code: 'assign',
              text: '分配',
              tooltip: '分配客户',
            },
            {
              code: 'stop',
              text: '停止服务',
              tooltip: '停止客户服务',
            },
            {
              code: 'delete',
              text: '删除',
              tooltip: '删除客户',
            },
          ],
        });
      },
    },
  ];
}

export function useFormSchema(): VbenFormSchema[] {
  return [
    {
      component: 'Input',
      componentProps: {
        placeholder: '请输入客户编号',
      },
      fieldName: 'customerCode',
      label: '客户编号',
      rules: 'required',
    },
    {
      component: 'Input',
      componentProps: {
        placeholder: '请输入客户名称',
      },
      fieldName: 'customerName',
      label: '客户名称',
      rules: 'required',
    },
    {
      component: 'Input',
      componentProps: {
        placeholder: '请输入组织名称',
      },
      fieldName: 'organizationName',
      label: '组织名称',
      rules: 'required',
    },
    {
      component: 'Select',
      componentProps: {
        options: [
          { label: '正常服务', value: 1 },
          { label: '暂停服务', value: 0 },
        ],
        placeholder: '请选择状态',
      },
      fieldName: 'status',
      label: '状态',
      rules: 'required',
    },
    {
      component: 'Input',
      componentProps: {
        placeholder: '请输入记账会计',
      },
      fieldName: 'accountant',
      label: '记账会计',
    },
    {
      component: 'Input',
      componentProps: {
        placeholder: '请输入主管会计',
      },
      fieldName: 'supervisor',
      label: '主管会计',
    },
    {
      component: 'Input',
      componentProps: {
        placeholder: '请输入制单会计',
      },
      fieldName: 'bookkeeper',
      label: '制单会计',
    },
    {
      component: 'Textarea',
      componentProps: {
        placeholder: '请输入备注信息',
        rows: 3,
      },
      fieldName: 'remark',
      label: '备注',
    },
  ];
}

export function useGridFormSchema(): VbenFormSchema[] {
  return [
    {
      component: 'Input',
      componentProps: {
        placeholder: '请输入客户编号',
      },
      fieldName: 'customerCode',
      label: '客户编号',
    },
    {
      component: 'Input',
      componentProps: {
        placeholder: '请输入客户名称',
      },
      fieldName: 'customerName',
      label: '客户名称',
    },
    {
      component: 'Select',
      componentProps: {
        allowClear: true,
        options: [
          { label: '正常服务', value: 1 },
          { label: '暂停服务', value: 0 },
        ],
        placeholder: '请选择状态',
      },
      fieldName: 'status',
      label: '状态',
    },
    {
      component: 'Input',
      componentProps: {
        placeholder: '请输入记账会计',
      },
      fieldName: 'accountant',
      label: '记账会计',
    },
  ];
}